<template>
    <div class="home">
        <div ref="main" class="main"></div>
        <div ref="box" class="box"></div>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const main = ref<HTMLElement | null>(null)
const box = ref<HTMLElement | null>(null)
const mainzhu = (data: number[]) => {
    let myChart = echarts.init(main.value as HTMLElement);
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: ['18-24', '25-31', '32-38', '39-45', '46-52', '53-60']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data,
                type: 'bar'
            }
        ]
    })
}
const boxbing = (data: number[]) => {
    let myChart = echarts.init(box.value as HTMLElement);
    myChart.setOption({
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: data[0], name: '18-24' },
                    { value: data[1], name: '25-31' },
                    { value: data[2], name: '32-38' },
                    { value: data[3], name: '39-45' },
                    { value: data[4], name: '46-52' },
                    { value: data[5], name: '53-60' }
                ]
            }
        ]
    })
}
const mainsList = async () => {
    const resp = await axios.post('/api/list/main')
    const { data } = resp.data
    data.value = data
    mainzhu(data)
    boxbing(data)
}
onMounted(() => {
    mainsList()
})
</script>
<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main,.box {
    width: 100%;
    height: 400px;
}
</style>